<template>
    <div
        class="sponsor-examine"
        ref="first"
        v-loading="loading.status"
        :element-loading-text="loading.txt"
        element-loading-background="transparent">
        <ul v-if="loading.status == false && list.length!=0" class="examine-list">
            <li v-for="(item,key) in list" :key="key">
                <p>{{item.name}}<span>（{{item.child_count}}）</span></p>
                <ul class="clear">
                    <li class="fl pointer" v-for="(childItem,childKey) in item.child" :key="childKey" @click="turnDetail(childItem.id)">
                        <img :src="BASE_URL+childItem.icon_path" :alt="childItem.name">
                        <span>{{childItem.name}}</span>
                    </li>
                </ul>
            </li>
        </ul>


        <div v-if="loading.status == false && list.length==0" class="nothing">
            <img src="../../../assets/images/examine/nothing.png" alt="无列表信息图片">
            <p>无匹配项~</p>
        </div>
    </div>
</template>

<script type="text/javascript">
    export default {
        data(){
            return {
                // 加载数据时显示的信息和加载动画
                loading: {
                    status: true,
                    txt:'获取数据...',
                },
                list: [],   // 存放审批模板列表
                loading:{
                    status:false,
                    txt:'获取数据...',
                },
            }
        },
        created(){
            this.getList()
        },
        methods:{
            // 跳转到审批申请详情页
            turnDetail(id){
                this.$router.push({path: '/examine/detail', query:{id:id}})
            },
            // 获取审批模板列表
            getList(keyword){
                // 显示加载动画
                this.loading.status = true;

                let params = {
                    user_id: JSON.parse(sessionStorage.getItem('user_info_str')).id   // 当前登录人id
                }

                if(keyword){
                    params.keyword = keyword;   // 关键字搜索（审批模板名）
                }  

                let success = res => {
                    // 隐藏加载动画
                    this.loading.status = false;
                    this.list = res.data;
                }
                this.$ajax({
                    url: "/api/examine/examineFormwork",
                    method: "get",
                    params: params,
                    func: { success: success }
                })
            }
        }
    }
</script>

<style type="text/css" lang="scss">
     #examine{
        .index-container{
            .sponsor-examine{

                // 审批单列表
                .examine-list{
                    height: 100%;
                    overflow-X: hidden;
                    >li{
                        margin-top: 20px;
                        padding-left: 40px;
                        min-height: 100px;
                        background: #fff;
                        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                        border-radius: 3px;
                        >p{
                            height: 60px;
                            line-height: 60px;
                            font-size: 14px;
                            color: #333333;
                            >span{
                                color: #999;
                            }
                        }
                        &:first-child{
                            margin:0;
                        }
                        >ul{
                            >li{
                                box-sizing: border-box;
                                margin-right: 30px;
                                margin-bottom: 20px;
                                padding: 9px 14px;
                                width: 200px;
                                height: 70px;
                                border: 1px solid #EFEFEF;
                                border-radius: 4px;
                                >img{
                                    margin-right: 20px;
                                    width: 50px;
                                    height: 50px;
                                    vertical-align: middle;
                                }
                                >span{
                                    vertical-align: middle;
                                    display: inline-block;
                                    width: 100px;
                                    max-height: 40px;
                                    font-size: 14px;
                                    line-height: 20px;
                                    color: #333333;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    // white-space: nowrap;
                                    // -webkit-box-orient: vertical;
                                    // -webkit-line-clamp: 2;
                                }
                            }
                        }
                    }
                }

                // 没有审批单列表时显示的信息
                .nothing{
                    margin-top: 20px;
                    padding-top: 120px;
                    height: 372px;
                    background: #fff;
                    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                    border-radius: 3px;
                    >img{
                        margin: 0 auto;
                        display: block;
                    }
                    >p{
                        margin-top: 38px;
                        font-size: 18px;
                        text-align:center;
                        color: #a2b2bb;
                    }
                }
            }
        }
    }
</style>